<template>

    <div class="drop-down-box">
        <div>
            <!-- 综合排序 -->
            <a-dropdown>
                <a class="ant-dropdown-link" @click.comprehensive>
                    综合排序
                    <DownOutlined />
                </a>
                <template #overlay>
                    <a-menu>
                        <a-menu-item v-for="(item, index) in comprehensive" :key="index">

                            <a href="javascript:;" class="menu-item">{{ item.name }}</a>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
        <div>
            <!-- 筛选 -->
            <a-dropdown>
                <a class="ant-dropdown-link" @click.prevent>
                    筛选
                    <DownOutlined />
                </a>
                <template #overlay>
                    <a-menu>
                        <a-menu-item v-for="(item, index) in prevent" :key="index">
                            <a href="javascript:;" class="menu-item">{{ item.name }}</a>
                        </a-menu-item>

                    </a-menu>
                </template>
            </a-dropdown>
        </div>

    </div>

</template>

<script setup>

const comprehensive = ref([
    {

        name: '推荐'
    },
    {

        name: '热门'
    },
    {

        name: '更新'
    },

])
const prevent = ref([
    {
        name: '男装'
    },
    {
        name: '女装'
    },
    {
        name: '男鞋'
    },
])

</script>

<style lang="less" scoped>
.drop-down-box {
    margin-top: 40px;
    margin-bottom: 30px;
    display: flex;
    gap: 50px;

}

.ant-dropdown-link {
    font-size: 0.72vw;
    color: var(--color-text-3) !important;
}

.menu-item {
    font-size: 0.72vw;
    color: var(--color-text) !important;
}
</style>